<template>
  <div class="article-comments">
    <!-- 评论列表 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="别翻了，这文章没啥热度，，没评论了"
      @load="commentOnLoad"
    >
      <van-cell
        v-for="(item,index) in commentList"
        :key="index"
      >
        <van-image
          slot="icon"
          round
          width="30"
          height="30"
          style="margin-right: 10px;"
          :src="item.aut_photo"
        />
        <span style="color: #466b9d;" slot="title">hello</span>
        <div slot="label">
          <p style="color: #363636;">{{ item.content }}</p>
          <p>
            <span style="margin-right: 10px;">{{ item.pubdate|relative }}</span>
            <van-button size="mini" type="default">回复</van-button>
          </p>
        </div>
        <van-icon slot="right-icon" name="like-o"/>
      </van-cell>
    </van-list>
    <!-- 评论列表 -->

    <!-- 发布评论 -->
    <van-cell-group class="publish-wrap">
      <van-field
        clearable
        placeholder="请输入评论内容"
        v-model.trim="comment"
      >
        <van-button slot="button" size="mini" type="info" @click="addComment">发布</van-button>
      </van-field>
    </van-cell-group>
    <!-- /发布评论 -->
  </div>
</template>

<script>
  import { reqGetComments, reqAddComment } from '@/api/article.js'

  export default {
    name: 'ArticleComment',
    props: {
      // 接收文章id
      artId: {
        // 类型
        type: [String, Number],
        // 参数必传
        require: true
      }
    },
    data () {
      return {
        // 评论列表
        commentList: [],
        // 上拉加载更多的 loading
        loading: false,
        // 是否加载结束
        finished: false,
        offset: 1,
        // 评论内容
        comment: ''
      }
    },

    methods: {
      // van-list load方法，上拉获取文章评论
      async commentOnLoad () {
        // 调用接口
        // 子组件无法通过路由直接获取父组件接收的上一个页面的参数，这里只能用父子通信
        // const res = await reqGetComments(this.$route.params.id, this.offset)
        console.log(this.artId)
        const res = await reqGetComments(this.artId, this.offset)
        // 将接口结果添加到list中
        console.log('评论' + res)
        this.commentList.push(...res.data.data.results)
        // 获取一次就关一次van-list load方法
        this.loading = false
        // 当再也查询不到结果时，代表没有评论了，需要结束加载
        if (res.data.data.results.length === 0) {
          this.finished = true
        }

        // 因为分页接口，所以需要获取下一次分页当偏移量，
        // 接口返回值已经有了，直接拿就行
        this.offset = res.data.data.last_id
      },

      // 发布评论
      async addComment () {
        const res = await reqAddComment(this.artId, this.comment)
        // console.log(res.data.data.new_obj)
        // 操作成功, 更新视图, 最新的评论, 应该出现在评论的最上方
        // 从接口的返回值中, 会有一个new_obj数据, 就表示新发布的评论对象
        this.commentList.unshift(res.data.data.new_obj)
        console.log(this.commentList)
        // 清空评论区
        this.content = ''
        // 添加提示
        this.$toast.success('发布评论成功')
      }
    }
  }
</script>

<style scoped lang='scss'>
  // 发表评论的区域是固定在下端的
  .publish-wrap {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
  }

  // 给发表评论区空出地方
  .van-list {
    margin-bottom: 45px;
  }
</style>
